<template>
    <div v-if="isShow" style="text-align: center;">
        <div v-if="wordsList.length <= 0 && isWord == false" style="text-align: center;" >
            <p class="t1 ts">所有单词已考试完毕！请提交答题试卷！</p>
            <el-button  type="primary" @click="execute" >考试结果提交</el-button>
        </div>
        <div v-else-if="word.riWord != null">
            <p>
                <b>剩余未答单词：</b><span>{{ wordsList.length }}</span>
            </p>
            <!--中译日-->
            <div v-if="recordType === 'ZH_TO_RI'" style="padding: 30px;">
                <p class="t1"></p><p class="t2">{{ word.zhWord }}</p>
                <div v-if="showWord">
                    <p class="t1">有当用汉字格式：</p><p class="t2">{{ word.riWord }}</p>
                    <p class="t1">纯日语假名格式：</p> <p class="t2">{{ word.riWordKana }}</p>
                </div>
                <el-button round type="warning" v-if="showWord" @keyup.space="showWord" @click="showWordF">隐藏答案</el-button>
                <el-button round type="warning" v-else @keyup.space="showWord" @click="showWordF">查看答案</el-button>
            </div>
            <!--日译中-->
            <div v-else>
                <audio :src="word.riRy" controls="controls" autoplay style="padding-top: 15px;"></audio>
                <div v-if="showWord">
                    <p class="t1">有当用汉字格式：</p><p class="t2">{{ word.riWord }}</p>
                    <p class="t1">对应中文解释：</p><p class="t2">{{ word.zhWord }}</p>
                </div>
                <div style="padding: 20px 0px 0px 0px;">
                    <el-button round type="warning" v-if="showWord" @keyup.space="showWord" @click="showWordF">隐藏答案</el-button>
                    <el-button round type="warning" v-else @keyup.space="showWord" @click="showWordF">查看答案</el-button>
                    <el-button round type="danger" @click="falseAdd(word)">添加到不会或不熟练项</el-button>
                </div>
            </div>
            <el-button round type="success" style="margin-top: 30px;" @click="nextWord">下一个单词</el-button>
        </div>
        <div v-else>
            <h2 style="padding-top: 30px;color: chocolate;">考试单词共：{{ wordsList.length }} 个</h2>
            <el-button round type="success" style="margin-top: 30px;" @click="nextWord">开始</el-button>
        </div>
    </div>
    
</template>

<script>
export default {
    props: {
        wordsList:{
            type: Array,
            required: true
        },
        recordType:{
            type: String,
            required: true
        },
        isShow:{
            type: Boolean,
            required: true
        },
        recordId:{
            type: Number,
            required: true
        }
    },
    data(){
        return {
            word:{},
            showWord:false,
            isWord:false,
            recordList:[],
            isAddFalse:true
        }
    },
    methods:{
        nextWord(){
            if(this.wordsList.length > 0){
                this.showWord = false;
                this.word = this.wordsList.shift();
                this.isWord = true;
            }else{
                this.isWord = false;
            }
        },
        showWordF(){
            this.showWord = !this.showWord;
        },
        resolverTags(tag){
            switch(tag){
                case 1:
                    return "「一类动词」";
                case 2:
                    return "「二类动词」";
                case 3:
                    return "「三类动词」";
                case 4:
                    return "「な形容词」";
                case 5:
                    return "「い形容词」";
                case 6:
                    return "「小语法」";
            }
            return "";
        },
        execute(){
            this.$emit("execute",this.recordList);
        },
        falseAdd(word){
            let addObj = {
                wordId:word.wordId,
                dictationRecordId:this.recordId
            }
            if(this.recordList && !this.$arrExitObj(this.recordList,addObj)){
                this.recordList.push(addObj)
            }
        }
    },
    mounted(){
        this.nextWord();
    }
};
</script>

<style lang="scss" scoped>
.t1,.t2 {
    font-size: 36px;
}
.t1{
    color: burlywood;
}
.t2{
    color:darkgrey;
}
.t3{
    font-size: 38px;
    letter-spacing: 0.3px;
}
.ts{
    padding: 5vh;
}
</style>